<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@next"></script>

</head>
<body>

<div id="app">
    <span style="background-color: darkorange" v-if="10 > 5">大于</span><br/>
    <span style="background-color: darkorange" v-if="10 < 5">小于</span><br/>
    <span style="background-color: darkorange" v-if="isOk">显示</span><br/>
    <span style="background-color: darkorange" v-if="!isOk">不显示</span><br/>

    <h3 v-if="age > 18">成年</h3>
    <h3 v-else>未成年</h3>

    <h3>成绩</h3>
    <h4 v-if="score==100">满分</h4>
    <h4 v-else-if="score >= 90">优秀</h4>
    <h4 v-else-if="score >= 80">良好</h4>
    <h4 v-else-if="score >= 60">及格</h4>
    <h4 v-else>不及格</h4>

</div>

</body>

<script>
    Vue.createApp({
        data() {
            return {
                isOk:true,
                age:15,
                score:80
            }
        },
        methods: {}
    }).mount("#app")
</script>

</html>